import React, { useEffect, useState } from 'react'

import './App.css'

import Comment from './pages/Comment'
import Home from './pages/Home'
import Search from './pages/Search'

import List from './pages/List'



import { BrowserRouter as Router, Route, Link, NavLink, Switch, Redirect } from 'react-router-dom'

// import { HashRouter as Router, Route, Link, NavLink, Switch, Redirect } from 'react-router-dom'


import { useParams, useLocation } from 'react-router'



import qs from 'qs'







const NotFound = () => <h1> 404 组件</h1>

const Article = (props) => {


    //    第一种 props
    console.log(props);
    console.log(props.match.params); //  params 传递参数
    //  query  传递参数


    //  第二种 useParams  hooks 
    const params = useParams()

    console.log(params)

    const location = useLocation()
    console.log('43', location)


    let qsObj = qs.parse(location.search, { ignoreQueryPrefix: true })

    console.log(qsObj)

    return (
        <div>
            文章页面

        </div>
    )
}


export default function App () {




    return (
        <>
            <div>App</div>
            <Router>
                <ul>
                    <li>
                        <NavLink to="/home">首页</NavLink>
                    </li>
                    <li>
                        <NavLink to="/comment">评论</NavLink>
                    </li>
                    <li>
                        {/* activeClassName="myActive"  自定义高亮 默认是active */}
                        <NavLink to="/search"

                        >搜索</NavLink>
                    </li>
                    <li>
                        <NavLink to="/article/1">文章1</NavLink>
                    </li>
                    <li>
                        <NavLink to="/article/2">文章2</NavLink>
                    </li>
                    <li>
                        <NavLink to="/list">list</NavLink>
                    </li>
                </ul>
                {/*   路径与组件对应的关系  映射关系 */}
                {/* <Switch 匹配一个 */}
                <Switch>
                    {/* <Route path='/' exact component={Home} ></Route> */}
                    {/*  重定向  Redirect*/}
                    <Redirect from="/" exact to="/home" />
                    <Route path='/home' component={Home} ></Route>
                    <Route path='/comment' component={Comment} ></Route>
                    <Route path='/search' strict component={Search} ></Route>
                    <Route path='/article/:id' component={Article} ></Route>
                    <Route path='/article/:id/:name ' component={Article} ></Route>
                    <Route path='/list' component={List} ></Route>



                    {/*  404 只能写在最后面  */}
                    <Route component={NotFound} ></Route>
                </Switch>

            </Router>






        </>

    )
}
